<script setup>
import { useGetFriendStore, getFriendHeadShot, friendList } from '@/stores/getFriend';
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useChatRecordingStore, reverseList  } from '@/stores/chatRecording';
import { setFriendInfo } from '@/stores/friend';
import { userId, userHeadShot } from '../../stores/user'
import { rightPage } from '../../stores/page'
import { useSendChatMessageStore } from '@/stores/sendChatMessage';
import { isAudio } from '@/stores/loading'


//发送聊天信息
const sendChatMessage = useSendChatMessageStore()

//获取用户所有的好友列表
const getFriendStore = useGetFriendStore();

//获取好友列表
onMounted(() => {
  getFriendStore.getFriendList();
})

//获取聊天记录与好友信息
const chatRecordingStore = useChatRecordingStore();


//展示聊天记录与好友信息
function show(item){
  // console.log(item)
  //关闭录音
  isAudio.value = false
  //将聊天好友的信息储存到会话储存中
  sessionStorage.setItem('friend', JSON.stringify(item));
  //更改会话的好友信息
  setFriendInfo()
  //获取聊天记录
  if(item.type === 'user'){
  chatRecordingStore.getChatRecordingList();
  // console.log(reverseList)
  }
  else if(item.type === 'group'){
    chatRecordingStore.getGroupChatRecordingList()
    // console.log(reverseList)
  }
  rightPage.value = 1
  sendChatMessage.content = ''
}

</script>

<template>
    <div id="chatInterface_user">
        <el-scrollbar height = 91.5vh>
          <el-menu >
          <div v-for="item in friendList" :key="item" class=".scrollbar-demo-item" >
            <!-- {{ console.log(item) }} -->
              <el-menu-item style="border-bottom:solid 1px;" @click="show(item);" :index="item.name" >
                <div v-if="item.id === userId && item.type === 'user'" style="height:60px; width:19.3vw;">
                  <el-avatar shape="square" :size="38" :src="userHeadShot" style="position:absolute;left:10%; bottom:15%"/>
                  <p style="position:absolute;left:30%; font-size:20px">{{ item.name }}</p>
                </div>
                <div v-else style="height:60px; width:19.3vw;">
                  <el-avatar shape="square" :size="38" :src="getFriendHeadShot(item.headShotUrl)" style="position:absolute;left:10%; bottom:15%"/>
                  <p style="position:absolute;left:30%; font-size:20px">{{ item.name }}</p>
                </div>
              </el-menu-item>   
          </div>
          </el-menu>
        </el-scrollbar>
    </div>
</template>

<style scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width : 19.3vw;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
</style>